<html>
	<head>
		<meta charset="UTF-8" />
		<title>Sgs Test Client</title>
		<style type="text/css">
			dl {
			    padding: 2px;
				margin-top:0px;
			}
			dt {
			    float: left;
			    clear: left;
			    min-width: 100px;
			    text-align: left;
			    font-weight: bold;
			    color: green;
			}
			dt:after {
			    content: ":";
			}
			dd {
			    margin: 0 0 0 100px;
				padding: 0 0 3px 5px;
			}
			.server:after  {
				content: "";
			}
			.server{
				color: red;
			}
			label {
				font-weight: bold;
				color: green;
			}
			ul {
				padding-left: 2px;
				margin: 0 0 0 0;
				list-style-type:none;
				color: black;
			}
			.myself {
				color: green;
			}
			.myself:before {
				content: '> ';
			}
		</style>
		<script src="sgsClient.js" type="text/javascript" ></script>
		<script type="text/javascript">
		var chatExample = {
			channelId : null,
			channelName : null,
			username : null,
			
			login : function(username, password) {
				if(username === null || username.length == 0) {
					alert('Enter a username!');
					return;
				}
				
				this.switchDiv('login', 'connecting');
				this.username = username;
				sgsNetwork.callbackObject = this.callback;
				sgsNetwork.login(username, password);
			},
			
			send : function() {
				var value = document.getElementById('chatInput').value;
				
				if(value.length == 0) {
					return;
				}
				
				if(value.substr(0, 7) === '/logout') {
					sgsNetwork.logout();
				}
				else if(value.substr(0, 1) === '/') {
					sgsNetwork.sendSessionMessage(value);
				}
				else {
					// normal chat msg:
					if(this.channelid === null) {
						alert('No channel joined!');
						return;
					}
					sgsNetwork.sendChannelMessage(this.channelId, value);
				}
				
				document.getElementById('chatInput').value = '';
			},
			
			switchDiv : function(idToHide, idToShow) {
				var hide = document.getElementById(idToHide);
				var show = document.getElementById(idToShow);
				hide.style.display = "none";
				show.style.display = "block";
			},
			
			toggleDiv : function(id) {
				d = document.getElementById(id);
				if (d)  {
					if (d.style.display == "none") {
						d.style.display = "block";
					}
					else {
						d.style.display = "none";
					}
				}
			},
			
			insertChatMsg : function(name, msg, styleClass) {
				var cssClass = '';
				if(typeof(styleClass) != "undefined") {
				  cssClass = ' class="' + styleClass + '"';
				}
				
				var old = document.getElementById('content').innerHTML;
				var text = '<dt' + cssClass + '>' + name + '</dt><dd' + cssClass + '>' + msg + '</dd>' + old; 
				document.getElementById('content').innerHTML = text;
			},
			
			updateUserList : function(data) {
				if(data === null) {
					document.getElementById('userlist').innerHTML = '';
					return;
				}
				var names = data.split(',');
				var text = '';
				for(i = 0; i < names.length; i++) {
					if(names[i] == this.username) {
						text += '<li class="myself">' + names[i] + '</li>';
					}
					else {
						text += '<li>' + names[i] + '</li>';
					}
				}
				document.getElementById('userlist').innerHTML = text;
			},
			
			callback : {
				login : function(sessionId, username) {
					chatExample.switchDiv('connecting', 'chat');
					chatExample.username = username;
				},
				
				logout : function() {
					chatExample.switchDiv('chat', 'login');
					chatExample.username = null;
				},
				
				loginFailure : function(reason) {
					alert('Could not log in: ' + reason);
					chatExample.switchDiv('connecting', 'login');
				},
				
				sessionMessage : function(msg) {
					var i = msg.indexOf('/');
					var command = msg.substr(0, i);
					var data = msg.substr(i + 1);
					if(command.length > 0) {
						if(command == 'list') {
							chatExample.updateUserList(data);
						}
						else {
							chatExample.insertChatMsg('', data, 'server');
						}
					}
					else {
						chatExample.insertChatMsg('', data, 'server');
					}
				},
				
				channelMessage : function(channelId, msg) {
					var i = msg.indexOf(':');
					var username = msg.substr(0, i);
					var content = msg.substr(i + 1);
					if(username.length > 0) {
						chatExample.insertChatMsg(username, content, null);
					}
					else {
						var n = content.indexOf(' ');
						if(content.substr(0, n) == chatExample.username) {
							// ignore ourself
						}
						else {
							sgsNetwork.sendSessionMessage('/list');
							chatExample.insertChatMsg('', content, 'server');
						}
					}
				},
				
				channelJoin : function(channelId, channelName) {
					chatExample.channelId = channelId;
					chatExample.channelName = channelName;
					sgsNetwork.sendSessionMessage('/list');
					document.getElementById('channel').innerHTML = 'Channel: <b>' + channelName + '</b>';
				},
				
				channelLeft : function(channelId) {
					chatExample.channelId = null;
					chatExample.channelName = null;
					chatExample.updateUserList(null);
					document.getElementById('channel').innerHTML = 'Channel: <b>n/a</b>';
				},
				
				error : function(errorMsg) {
					
				}
			}
		}
		</script>
	</head>
	<body>
		<div id="login" style="width:848px;height:300px;border:1px solid #dddddd;">
			<div style="width:200px;height:100px;margin:100px auto;">
				<form onSubmit="chatExample.login(document.getElementById('user').value, document.getElementById('pass').value); return false;">
					<label for="username">Username</label>
					<input id="user" name="username" type="text" style="width:100%;heigth:20px;">
					<label id="pass" for="password">Password</label><input name="username" type="password" style="width:100%;heigth:20px;">
					<div style="text-align:center;padding-top:0px;">
						<a onClick="chatExample.login(document.getElementById('user').value, document.getElementById('pass').value); return false;">Login</a>
					</div>
				</form>
			</div>
		</div>
		<div id="connecting" style="display:none;width:848px;height:300px;border:1px solid #dddddd;">
			<div style="width:200px;height:20px;margin:140px auto;text-align:center;color: green;font-weight: bold;">
				Connecting to server...
			</div>
		</div>
		<div id="chat" style="display:none;">
			<div id="channel" style="width:848px;height:25px;border-left:1px solid #dddddd; border-right:1px solid #dddddd; border-top:1px solid #dddddd;">
			Channel: <b>n/a</b>
			</div>
			<div style="width:599px;height:250px;overflow-y:scroll;float:left;border-left:1px solid #dddddd;border-top:1px solid #dddddd;">
				<dl id="content">
				</dl>
			</div>
			<div style="margin-left:600px;width:250px;height:250px;overflow-y:scroll;border-top:1px solid #dddddd;">
				<ul id="userlist">
				</ul>
			</div>
			<div style="clear:both;">
				<form onSubmit="chatExample.send(); return false;">
					<input id="chatInput" name="msg" style="width:850px;height:25px;">
				</form>
			</div>
		</div>
	</body>
</html>